<template>
  <div>
    <el-button size="small" @click="createChild" type="primary"
      >添加参数</el-button
    >
    <el-table
      class="mt-2"
      :data="formItems"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      :show-header="false"
    >
      <el-table-column prop="date" label="" sortable width="160">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.field"
            size="small"
            placeholder="field"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="" sortable width="120">
        <template slot-scope="scope">
          <el-select size="small" placeholder="类型" v-model="scope.row.type">
            <el-option label="string" value="string"></el-option>
            <el-option label="file" value="file"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="" sortable width="120">
        <template slot-scope="scope">
          <el-select size="small" v-model="scope.row.required">
            <el-option label="必须" :value="true"></el-option>
            <el-option label="非必须" :value="false"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="" sortable width="200">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.default"
            size="small"
            placeholder="参数示例"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="">
        <template slot-scope="scope">
          <span class="grow flex">
            <el-input
              v-model="scope.row.description"
              placeholder="备注"
              size="small"
            ></el-input>
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="date" label="" sortable width="60">
        <template slot-scope="scope">
          <span class="flex items-center">
            <i
              @click="remove(scope.row)"
              class="el-icon-close ms-1 cursor-pointer"
            ></i>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
  <script>
import { ref } from "@vue/composition-api";

export default {
  setup() {
    const formItems = ref([
      {
        id: 1,
        field: "",
        type: "",
        default: "",
        description: "",
        required: true,
      },
    ]);

    const typeOptions = ["string", "file"];

    let i = 1;
    function createChild() {
      formItems.value.push({
        id: ++i,
        field: "",
        type: "",
        default: "",
        description: "",
        required: true,
      });
    }
    function remove(ele) {
      const index = formItems.value.findIndex((item) => item === ele);
      formItems.value.splice(index, 1);
    }

    function setFormItems(requestBody) {
      if (
        requestBody &&
        requestBody.content &&
        requestBody.content["multipart/form-data"] &&
        requestBody.content["multipart/form-data"].schema
      ) {
        const schema = requestBody.content["multipart/form-data"].schema
        formItems.value = Object.entries(schema.properties).map(([field, item]) => {
          const it = {
            id: i++,
            field,
            ...item,
          };
          return it;
        })
      }
    }

    function getFormItems() {
      const properties = {};
      const schema = {
          properties,
      }
      formItems.value.filter(item => item.type && item.field).forEach((item) => {
        const { field, type, description, required } = item;
        properties[field] = { type, default: item.default, description, required };
      });
      return schema;
    }

    return {
      formItems,
      typeOptions,
      createChild,
      remove,
      setFormItems,
      getFormItems,
    };
  },
};
</script>
  
  <style scoped>
</style>